<template>
  <view
    class="store-content"
    :style="'height:' + screenHeight + 'px !important;'"
  >
  <view class="backtobefore" @click="gotobefore">
    <text class="iconfont icon-xiangzuo" ></text>
    <text>返回</text>
  </view>
     
    <view class="bgimg">
       <view class="zhezhao"> </view>
      <image class="bgimg-img" :src="nowstoreinfo.headImg"></image>
    </view>
    <view id="store-content-top">
      <view :class="[fixedtitle ? 'fixedtitle' : '', 'store-title']">
        <view class="h1-title">{{ nowstoreinfo.name }}</view>
        <view class="h2-title">{{ nowstoreinfo.desc }}</view>
      </view>
      <view class="foods-list">
        <scroll-view
          id="mainscroll"
          :scroll-top="scrollTop"
          scroll-y="true"
          class="scroll-Y foods-list-scoll"
          @scrolltoupper="upper"
          @scrolltolower="lower"
          @scroll="scroll"
        >
          <view
            class="foods-type"
            v-for="foodtype in nowstoreinfo.food_type_list"
            :key="foodtype.food_type_id"
          >
            <view class="foods-type-title">
              {{ foodtype.food_type_name }}
            </view>
            <view class="foods-li-box">
              <view
                class="foods-li"
                v-for="foodlist in foodtype.foods_list"
                :key="foodlist.food_id"
              >
                <image
                  class="foods-img"
                  :src="foodlist.food_img"
                  mode="aspectFit"
                ></image>
                <view class="food-title">{{ foodlist.food_name }}</view>
                <view class="food-desc">￥{{ foodlist.food_price }}</view>
                <view
                  class="iconfont icon-tianjia"
                  @click="addtocar(foodlist)"
                ></view>
              </view>
            </view>
          </view>
        
            <view class="bottom-tips" @click="goTop" id="gototop">没有更多菜单了哦~  <text class="iconfont icon-shang"></text></view>
         
        </scroll-view>
      </view>
      <view class="select-foods">
        <text class="text-info" @click="showcar">
          <text class="iconfont icon-RectangleCopy"></text>
          <text>{{ user_cart_list.length }}件商品</text>
        </text>
        <text
          >合计:￥<text class="text-all-price">{{ counprice }}</text></text
        >
        <button class="gotobuy" @click="gotobuy">立即购买</button>
      </view>
    </view>
    <view :class="[isshowcar ? 'buy-car-show' : 'buy-car-noshow', 'buy-car']">
      <view class="buy-car-info">
        <view class="buy-car-info-title">
          <view class="car-title">购物车</view>
          <view class="car-clear" @click="clearcar">清空</view>
        </view>

        <scroll-view
          id="carscoll"
          class="buy-car-list scroll-car-Y"
          :scroll-top="scrollcarTop"
          scroll-y="true"
          @scrolltoupper="upper"
          @scrolltolower="lower"
          @scroll="scroll"
        >
          <view
            class="buy-car-li"
            v-for="carfood in user_cart_list"
            :key="carfood.food_id"
          >
            <view class="car-img">
              <image :src="carfood.food_img" mode="aspectFit"></image>
            </view>
            <view class="car-food-desc flex-col">
              <view class="food-title">{{ carfood.food_name }}</view>
              <view class="food-price">￥{{ carfood.food_price }}</view>
            </view>
            <view class="car-food-edit flex-col">
              <text
                class="iconfont icon-tianjia"
                @click="changecarFood(carfood, 2)"
              ></text>
              <view class="food-num">
                <text
                  class="iconfont icon-jian"
                  @click="changecarFood(carfood, 0)"
                ></text>
                <text class="addnum">{{ carfood.addnum }}</text>
                <text
                  class="iconfont icon-tianjia"
                  @click="changecarFood(carfood, 1)"
                ></text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import * as api from "../../utils/api.js";
export default {
  data() {
    return {
      scollevent:{},
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      scrollcarTop: 0,
      old: {
        scrollcatTop: 0,
      },
      fixedtitle: false,
     
      isshowcar: false,

      screenHeight: "",
      nowstoreinfo: {
        store_id: 1,
        name: "小猫西餐",
        desc: "欢迎光临小猫西餐",
        headImg: "/static/foods3.jpg",
        food_type_list: [
          {
            food_type_id: 1,
            food_type_name: "沙拉",
            foods_list: [
              {
                food_id: 1,
                food_name: "核桃坚果沙拉1",
                food_price: 68,
                food_img: "/static/foods3.jpg",
              },
              {
                food_id: 2,
                food_name: "海鲜轻食沙拉",
                food_price: 78,
                food_img: "/static/foods1.jpg",
              },
              {
                food_id: 3,
                food_name: "核桃坚果沙拉",
                food_price: 68,
                food_img: "/static/foods4.jpg",
              },
              {
                food_id: 4,
                food_name: "核桃坚果沙拉",
                food_price: 68,
                food_img: "/static/foods4.jpg",
              },
              {
                food_id: 5,
                food_name: "核桃坚果沙拉",
                food_price: 68,
                food_img: "/static/foods1.jpg",
              },
            ],
          },
          {
            food_type_id: 2,
            food_type_name: "咖啡",
            foods_list: [
              {
                food_id: 6,
                food_name: "核桃坚果沙拉",
                food_price: 68,
                food_img: "/static/foods3.jpg",
              },
              {
                food_id: 7,
                food_name: "海鲜轻食沙拉",
                food_price: 78,
                food_img: "/static/foods5.jpg",
              },
              {
                food_id: 8,
                food_name: "核桃坚果沙拉",
                food_price: 68,
                food_img: "/static/foods6.jpg",
              },
              {
                food_id: 9,
                food_name: "核桃坚果沙拉",
                food_price: 68,
                food_img: "/static/foods1.jpg",
              },
              {
                food_id: 10,
                food_name: "核桃坚果沙拉",
                food_price: 68,
                food_img: "/static/foods4.jpg",
              },
            ],
          },
        ],
      },
      user_cart_list: [
        {
          food_id: 1,
          food_name: "核桃坚果沙拉1",
          food_price: 68,
          addnum: 2,
          food_img: "/static/foods3.jpg",
        },
        {
          food_id: 2,
          food_name: "核桃坚果沙拉2",
          food_price: 68,
          addnum: 1,
          food_img: "/static/foods4.jpg",
        },
        {
          food_id: 4,
          food_name: "核桃坚果沙拉3",
          food_price: 68,
          addnum: 2,
          food_img: "/static/foods6.jpg",
        },
      ],
      buyinfo: {
        username: "王者",
        userid: 12,
        useraddress: "sssss",
        totalpay: 0,
        paylist: this.user_cart_list,
      },
    };
  },
  computed: {
    counprice() {
      // this.user_cart_list.array.forEach(element => {

      // });
      return this.user_cart_list.reduce((sum, e) => {
        sum = sum + e.food_price * e.addnum;
        return sum;
      }, 0);
    },
  },

  onLoad(option) {
    this.screenHeight = uni.getSystemInfoSync().windowHeight;
    console.log(option);
    uni.request({
      url: api.GET_SELECT_STOREALLFOODS,
      data: { store_id: parseInt(option.store_id) },
      success: (res) => {
        this.nowstoreinfo = res.data.data[0];
      },
    });
  },
  methods: {
    upper: function (e) {},
    lower: function (e) {},
    scroll: function (e) {
        console.log(e)
        this.scollevent=e
        console.log(e.currentTarget.id === "mainscroll")

      if (e.currentTarget.id === "mainscroll") {
      
        this.old.scrollTop = e.detail.scrollTop;
      }
      if (e.currentTarget.id === "carscroll") {
        this.old.scrollcarTop = e.detail.scrollcarTop;
      }
    },
    goTop: function (e) {
     
    this.scrollTop = Math.random();  
    },
  
  
    //购买
    gotobuy() {
      //生成订单，跳转支付
      uni.navigateTo({
        url: "../topay/topay?store_id=" + this.buyinfo.userid,
      });
    },
    showcar() {
      if (this.user_cart_list.length > 0) {
        this.isshowcar = !this.isshowcar;
      }
    },
    addtocar(obj) {
      for (let i = 0; i < this.user_cart_list.length; i++) {
        if (this.user_cart_list[i].food_id === obj.food_id) {
          this.user_cart_list[i].addnum++;
        } else if (i === this.user_cart_list.length - 1) {
          this.user_cart_list.push({
            food_id: obj.food_id,
            food_name: obj.food_name,
            food_price: obj.food_price,
            addnum: 1,
            food_img: obj.food_img,
          });

          // console.log(this.user_cart_list);
        }
      }
    },
    clearcar() {
      this.user_cart_list = [];
      this.isshowcar = false;
    },
    changecarFood(which, type) {
      console.log(which);
      let index = this.user_cart_list.indexOf(which);
      if (type === 2) {
        //删除整条

        console.log("222222222222222222");

        console.log(this.user_cart_list.indexOf(which));
        this.user_cart_list.splice(index, 1);
      }
      if (type === 0) {
        if (which.addnum > 0) {
          which.addnum--;
          this.user_cart_list.splice(index, 1, which);
        } else {
          this.user_cart_list.splice(index, 1);
        }
      }
      if (type === 1) {
        which.addnum++;
        this.user_cart_list.splice(index, 1, which);
      }
      console.log(this.user_cart_list);
    },
   gotobefore(){
     uni.navigateBack({
     success: function() {
         beforePage.onLoad(); // 执行前一个页面的onLoad方法
     }
 });
   }
  },
};
</script>

<style scoped>
.backtobefore{
  position: fixed;
  z-index: 999;
  top:110rpx;
  left: 30rpx;
  color: white;
line-height: 38rpx;
  font-size: 34rpx;
 
}
.backtobefore .iconfont{
  font-size: 38rpx;
 margin-right: 20rpx;
}
.store-content {
  width: 100%;
  min-height: 100%;
}
.bgimg {
  position: fixed;
  background-position: bottom right;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
 
 
}
.zhezhao{
 background-color:rgba(0, 0, 0, 0.499);
 position: absolute;
   z-index: 0; 
   top:0;
    width: 100%;
   height: 100%;
}
.bgimg image{
  position: absolute;
  z-index: -1;
   top: 0;
  left: 0;
  right: 0;
  bottom: 0;
   width: 100%;
   height: 50%;
}
#store-content-top {

  height: 100%;
}
.store-title {
  width: 100%;

  padding-left: 40rpx;

  color: white;
  height: 30%;
  letter-spacing: 5rpx;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

.store-title .h1-title {
  font-size: 46rpx;
  font-weight: bold;
  
}
.store-title .h2-title {
  font-size: 30rpx;
  margin: 20rpx 0;
  font-weight: 500;
}
.foods-list {
  width: 100%;
  box-sizing: border-box;
  border-radius: 60rpx 60rpx 0 0;
  /* margin-top: 240rpx; */
  max-height: 75%;
  min-height: 70%;
  overflow: hidden;
  background: #f5f6f8;
  position: relative;
  padding: 60rpx 30rpx;
}

.scroll-Y {
  max-height: 1100rpx;
  min-height: 100%;
}
.scroll-Y ::-webkit-scrollbar {
  /* 隐藏滚动条，但依旧具备可以滚动的功能 */
  display: none;
  width: 0;
  height: 0;
  color: transparent;
  background: transparent;
}
.foods-type-title {
  font-size: 40rpx;
  margin-bottom: 30rpx;

  font-weight: bold;
  color: #252525;
}
.foods-li-box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.foods-li {
  width: 330rpx;
  height: 440rpx;
  box-sizing: border-box;
  padding: 30rpx 45rpx 20rpx;
  border-radius: 40rpx;
  background: #ffffff;
  text-align: center;
  position: relative;
  margin-bottom: 72rpx;
}
/* 食物 */
.food-title {
  min-width: 300rpx;
  margin: 10rpx 0;
  font-size: 34rpx;
  font-weight: bold;
  color: #22252b;
}
.food-desc {
  font-size: 32rpx;
  margin: 10rpx 0;
  color: #868686;
}
.foods-img {
  width: 240rpx;
  height: 240rpx;
}
.foods-li .icon-tianjia {
  width: 66rpx;
  height: 66rpx;
  text-align: center;
  line-height: 66rpx;
  background: #22252b;
  border-radius: 50%;
  color: #fff;
  position: absolute;
  bottom: -33rpx;
  z-index: 2;
  left: 50%;
  margin-left: -33rpx;
}
.select-foods {
  width: 100%;
  height: 100rpx;
  position: fixed;
  z-index: 8;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  line-height: 100rpx;
  background-color: white;
  padding: 0 30rpx;
  box-sizing: border-box;
  align-items: center;
}
.text-info {
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-RectangleCopy {
  font-size: 50rpx;
  color: #22252b;
  margin-top: -10rpx;
}
.text-all-price {
  font-weight: bold;
}
.gotobuy {
  display: inline-block;
  background-color: gold;
  border-radius: 45rpx;
  color: #22252b;
  padding: 0 83rpx;
  font-weight: bold;
  height: 90rpx;
  line-height: 90rpx;
  margin: 0;
}
.buy-car {
  position: fixed;
  z-index: 8;
  bottom: 100rpx;
  transition: all 0.4s;
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.363);
}
.scroll-car-Y {
  max-height: 1035rpx;
  min-height: 800rpx;
}
.buy-car-noshow {
  height: 0;
}
.buy-car-show {
  height: 100%;
}
.buy-car-info {
  position: absolute;
  width: 100%;
  z-index: 8;
  width: 100%;
  background-color: white;
  border-radius: 60rpx 60rpx 0 0;
  bottom: 0;
}
.buy-car-info-title {
  padding: 60rpx 30rpx 30rpx;
  display: flex;
  color: #252525;
  justify-content: space-between;
}
.car-title {
  font-size: 34rpx;
  font-weight: bold;
}
.car-clear {
  cursor: pointer;
  font-size: 30rpx;

  font-weight: 500;
}

.car-img {
  width: 140rpx;
  height: 140rpx;
}
.car-img > image {
  width: 100%;
  height: 100%;
}
.buy-car-li {
  width: 100%;
  height: 140rpx;
  margin: 20rpx 0;
  padding: 0 20rpx;
  box-sizing: border-box;
  display: flex;
  /* justify-content: space-between; */
}
.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20rpx 0;
  box-sizing: border-box;
}
.car-food-desc {
  margin-left: 20rpx;
  margin-right: 160rpx;
  overflow: hidden;
}
.car-food-edit {
  float: right;
  width: 180rpx;
  height: 100%;
  text-align: right;
}
.addnum {
  margin: 0 30rpx;
  font-size: 32rpx;
  font-weight: bold;
  height: 46rpx;
  line-height: 46rpx;
  border: 1px solid #ffffff;
}
.food-num {
  height: 44rpx;
  line-height: 44rpx;
}
.food-num .iconfont {
  font-size: 24rpx;

  border-radius: 10rpx;
}
.food-num .icon-tianjia {
  padding: 10rpx;
  background-color: #f9cc66;
}
.food-num .icon-jian {
  padding: 8rpx;
  border: 1px solid #bfbfbf;
}
.bottom-tips {
 

  font-size: 24rpx;
  color: #bfbfbf;
  text-align: center;
    margin: 20rpx 0 120rpx;
}
.bottom-btn {
  color: #bfbfbf;
  text-align: center;
  font-size: 24rpx;
 
}

</style>
